<template>
    <h5>{{count}}</h5>
    <button @click="add">点击 +1</button>
</template>

<script>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from "vue";

export default {
    name: "Demo",
    setup() {
        let count = ref(0)

        const add = () => {
            count.value += 1
        }

        // Vue3 可以通过组合式 API 的形式使用生命周期钩子
        onBeforeMount(() => {
            console.log('--Demo-- onBeforeMount');
        })

        onMounted(() => {
            console.log('--Demo-- onMounted');
        })

        onBeforeUpdate(() => {
            console.log('--Demo-- onBeforeUpdate');
        })

        onUpdated(() => {
            console.log('--Demo-- onUpdated');
        })

        onBeforeUnmount(() => {
            console.log('--Demo-- onBeforeUnmount');
        })

        onUnmounted(() => {
            console.log('--Demo-- onUnmounted');
        })

        return {
            count,
            add
        };
    },
    // Vue3 同 Vue 高度相似，可以使用声明式定义
    beforeCreate(){
        console.log('--Demo-- beforeCreate');
    },
    created(){
        console.log('--Demo-- created');
    },
    beforeMount(){
        console.log('--Demo-- beforeMount');
    },
    mounted(){
        console.log('--Demo-- mounted');
    },
    beforeUpdate(){
        console.log('--Demo-- beforeUpdate');
    },
    updated(){
        console.log('--Demo-- updated');
    },
    // Vue2 中为 beforeDestory
    beforeUnmount(){
        console.log('--Demo-- beforeUnmount');
    },
    // Vue2 中为 Destoryed
    unmounted(){
        console.log('--Demo-- unmounted');
    }
};
</script>

<style></style>
